<template     >

  <div class="notice" >
    <h3 style="text-align: center">标注说明</h3>
    <div class="notice-2">
    感谢您参与本次标注任务。本标注数据用于武汉大学经济与管理学院博士研究生的博士论文，该标注任务主要标注您对音频中医生语气的判断。<br>
    本次标注任务将有<strong> {{peopleVoiceCount}}</strong> 条语音，其中大部分语音经过模糊化处理，
    听不清语音的具体内容为正常情况。请您听完录音以后，回答相关题目，答案没有对错之分。请注意：
    </div>
  <li class="notice-item">1. 中途退出或者刷新，不计算任务量，为无效作答；</li>
    <li class="notice-item">2. 请您寻找安静的环境听取录音并进行作答；</li>
    <li class="notice-item">3. 每条语音标注时间不超过1分钟；</li>
    <li class="notice-item">4. 每条语音只能播放一次；</li>
    <li class="notice-item">5. 其中大部分语音经过模糊化处理，请根据您对说话着的语气感知进行作答。</li>
    <div><br><br></div>

    <div class="checkbox" style="text-align: center " >
      <el-checkbox v-model="radio" label="0" >我已了解本次标注任务的要求</el-checkbox>
    </div>

    <div style="text-align: center">
      <el-button :type="radio ? 'primary': 'info'" :disabled="radio ? false : true" @click="nextPage()">开始标记</el-button>
    </div>
  </div>
</template>

<script>
    export default {
      data () {
        return {
          radio: 0,
          peopleVoiceCount: 0
        };
      },
      methods: {
        getConfig() {
          var that = this;
          this.$api.config.get()
          .then(function(response) {
              that.peopleVoiceCount = response.data.peopleVoiceCount;
          });
        },
        nextPage() {
          if (!this.radio) {
            return;
          }
          this.$router.push("/playvoice");
        },
        created() {
          this.stopF5Refresh();
        },
        stopF5Refresh() {
          document.onkeydown = function(e) {
            var evt = window.event || e;
            var code = evt.keyCode || evt.which;
            //屏蔽F1---F12
            if (code > 111 && code < 124) {
              if (evt.preventDefault) {
                evt.preventDefault();
              } else {
                evt.keyCode = 0;
                evt.returnValue = false;
              }
            }
          };
          //禁止鼠标右键菜单
          document.oncontextmenu = function(e) {
            return false;
          };
        },
      },
      mounted() {
        // 没有登录直接进入该页面
        if (!this.$store.state.peopleId) {
          this.$router.push('/login');
          
          return;
        }
        this.getConfig();
        // this.stopF5Refresh()
        // this.created()
      },
    }
</script>

<style >
  .notice {
    font-size: 25px;
    vertical-align: middle;
    border: 10px solid #DCDFE6;
    width: 600px;
    /*width: 80%;*/
    height: auto;
    margin: 80px auto;
    /*margin:  auto;*/

    padding: 20px 10px 100px 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
    text-align: left;
  }
  .notice-2{
    padding: 0px 30px 5px 30px;

  }
  .checkbox {
    margin: 20px auto;
    font-size: 10px;
  }
  .notice-item{
    color: red;
    text-align: left;
    margin: auto 30px;
  }

  .el-button {
    font-size: 20px;
    /*border-radius: 25px;*/
  }
  .el-checkbox__label {
    font-size: 18px;
  }
  .el-checkbox__inner {
    top: 0px;
    width: 25px;
    height: 25px;
  }


  .el-checkbox__inner::after {
    margin-left: 3px;
    margin-top:1px;
    height: 13px;
    width: 8px;
  }


</style>
